Maps Webマップを使用するのに必要なAPIを説明します。
| 項目 | URL |
|---|---|
| マップ | https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/map.js |
| 静的(static)マップ | https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/staticMap.js |
JavaScript基盤のNHN Cloud Maps APIを利用して、Webブラウザにマップを表示する方法を説明します。 NHN Cloud Maps APIは、THINKWARE座標を使用します。縮約してTW座標、TW X座標、TW Y座標で表示します。 メソッドでオプションのパラメータは[param]と表示します。オプションのパラメータは省略できます。
※ NHN Cloud Maps APIで使用する座標は、THINKWARE専用座標にのみ使用されます。
THINKWARE座標を経緯度座標(WGS84)に変換するには、THINKMAP.tw_Wgs84()関数を利用します。 反対に経緯度座標(WGS84)をTHINKWARE座標に変換するには、THINKMAP.wgs84_Tw()関数を利用します。
| API名 | Parameter | Returns | 説明 |
|---|---|---|---|
| new thinkware.maps.Map(map_div, option) | map_div : String | マップを表示するDOM要素(element)または要素のID | |
| option.type：String | マップのタイプ 'i'：一般マップ、 'm'：モバイルマップ、 's'：要約マップ、 'a'：航空写真、 'm_a'：モバイル航空写真、 's_a'：要約航空写真、 'hybrid'：航空 default：'i' |
||
| option.center.twX：number | マップ中心のX座標：THINKWARE座標単位 | ||
| option.center.twY：number | マップ中心のY座標：THINKWARE座標単位 | ||
| option.level : number | マップのレベル | ||
| option.callback : function() | 初期化後に実行する関数 | ||
| option.logo : String | ロゴを表示する位置 top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right |
||
| changeType(type) | type : String | マップのタイプ 'i'：一般マップ、 'm'：モバイルマップ、 's'：要約マップ、 'a'：航空写真、 'm_a'：モバイル航空写真、 's_a'：要約航空写真、 'hybrid'：航空 default：'i' |
|
| thinkware.maps.event.addListener(target, event_type, func_cb) | target : Object | リスナーを追加する対象オブジェクト | |
| event_type : String | wheelup, wheeldown, wheel, zoomend, movestart, move, moveend, tileloadstart, tileloadend, tileloaderror, click, dblclick, rightclick, mousemove, mouseup, mousedown |
||
| func_cb : function() | 登録するリスナー | ||
| thinkware.maps.event.removeListener(target, event_type, func_cb) | target : Object | リスナーを削除する対象オブジェクト | |
| event_type : String | wheelup, wheeldown, wheel, zoomend, movestart, move, moveend, tileloadstart, tileloadend, tileloaderror, click, dblclick, rightclick, mousemove, mouseup, mousedown |
||
| func_cb : function() | 削除するリスナー | ||
| new thinkware.maps.Marker(option) | option.map : Object | thinkware.maps.Markerマーカーオブジェクト | マップオブジェクト |
| option.icon.url : String | アイコンURL | ||
| option.icon.size.width : number | アイコンの幅 | ||
| option.icon.size.heigth : number | アイコンの高さ | ||
| option.position.twX : number | マーカー作成X座標(THINKWARE座標単位) | ||
| option.position.twY : number | マーカー作成Y座標(THINKWARE座標単位) | ||
| option.positioning : String | 座標が位置する場所 top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right |
||
| option.title : String | ツールチップ文字列 | ||
| option.offset.pxX : number | pixel単位 | ||
| option.offset.pxY : number | pixel単位 | ||
| option.visible : boolean | 表示するかどうか | ||
| option.draggable : boolean | ドラッグ可否 | ||
| option.zIndex : number | z-index値 | ||
| option.opacity : number | 透明度 | ||
| option.stopEvent : boolean | マーカー上でマップイベントの実行を防止するかどうか | ||
| thinkware.maps.LineString.drawStart(target, option) | target : Object | マップオブジェクト | |
| option.stroke.style：String | 線のスタイル dot：· · · · · · dash：- - - - - - dashdot：- · - · - · - longdashdot：ㅡ·ㅡ·ㅡ solid：実線 |
||
| option.stroke.weight : number | 線の太さ(px) | ||
| option.stroke.color : String | 線の色 | ||
| option.stroke.opacity : number | 線の透明度 | ||
| option.callback : function() | 描写終了後に実行する関数 | ||
| option.measure : boolean | 距離測定ポップアップを表示するかどうか | ||
| option.isOnce : boolean | 1回描写後に終了するかどうか | ||
| thinkware.maps.LineString.drawEnd(target) | target : Object | マップオブジェクト | |
| thinkware.maps.util.getLonLatFromCoordinate(param) | param.twX : number | Coord座標 Object.lon : WGS84 Object.lat : WGS84 |
THINKWARE X座標 |
| param.twY : number | THINKWARE Y座標 | ||
| thinkware.maps.util.getCoordinateFromLonLat(param) | param.lon : number | TW座標 Object.twX: TW X座標 Object.twY : TW Y座標 |
経度 |
| param.lat : number | 緯度 |
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/map.js"></script>
<script>
//マップを使用するための認証を進行します。
Map.authentification("appKey");
</script>
<div id="div_map"></div>
<script type="text/javascript">
//宣言したDIVにマップを表示します。
var map = new thinkware.maps.Map("div_map", {
center: {
twX: 169030,
twY: 517922
},
level: 12,
type: "i",
callback: success = function() {
console.log("map init success!");
}
});
</script>
<script type="text/javascript">
// 作成されたマップオブジェクトのマップTypeを変更します。
// 一般：i、モバイル：m、要約：s、航空写真：a、モバイル航空：m_a、要約航空：s_a、航空：hybrid
// 航空写真に変更します。
map.changeType('i');
</script>
<script type="text/javascript">
//マップにmoveイベントを登録します。
thinkware.maps.event.addListener(map, 'click', mapEvent_cb)
//マップイベント発生時のコールバック関数
function mapEvent_cb(event){
console.log("event callback!");
}
</script>
<script type="text/javascript">
//マップからmoveイベントを削除します。
thinkware.maps.event.removeListener(map, 'move', mapEvent_cb)
</script>
<script type="text/javascript">
// マップにマーカーオブジェクトを追加します。
var marker = new thinkware.maps.Marker({
map: map,
position: {
twX: 169030,
twY: 517922
},
stopEvent: false
});
// マップにマーカーオブジェクトを移動させます。
marker.setPosition({twX: 169030, twY: 517922});
</script>
<script type="text/javascript">
// 描写モードに切り替えます。
var strokeOpt = {
style : 'longdash' // 線のスタイル(solid, dash, longdash, ... またはsegmentsを返す関数を参照) default: "solid"
, weight : 5 // 線の太さ(px) (default: 3)
, color : '#3399ff' //線の色(default: #3399ff)
, opacity : 1 //線の透明度(default: 1)
};
var drawOpt = {
stroke : strokeOpt
, callback : mapDraw_cb // 描写終了後に実行する関数(default: undefined)
, measure : true // 距離測定ポップアップを表示するかどうか(default: false)
, isOnce : false // 1回描写後に終了するかどうか(default: false)
};
//thinkware.maps.LineString.drawStart(map, drawOpt);
function mapDraw_cb(map){
console.log("draw finish!!!");
}
</script>
<script type="text/javascript">
// 描写モードを終了します。
thinkware.maps.LineString.drawEnd(map);
</script>
<script type="text/javascript">
// TW座標をWGS座標に変換します。
var tws = {
twX : 169030
, twY: 517922
};
var wgs84 = thinkware.maps.util.getLonLatFromCoordinate(tws);
console.log(wgs84.lon);
console.log(wgs84.lat);
</script>
<script type="text/javascript">
// WGS座標をTW座標に変換します。
var wgs84 = {
lon: 127.11074994024005
, lat: 37.40215870673785
};
var tws = thinkware.maps.util.getCoordinateFromLonLat(wgs84);
console.log(tws.twX);
console.log(tws.twY);
</script>
// 静的マップを使用するためのjsファイルを宣言します。
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/staticMap.js"></script>
// マップを入れるIMGを作成します。
<img id='staticMapImg' alt="" src="">
<script>
// 静的マップを使用するための認証およびパラメータを渡します。
StaticMap.authentification('staticMapImg',"appkey",'x=157423&y=266836&width=970&height=300&level=10&maptype=i&mx=158323&my=266836&txt=');
</script>
| 名前 | タイプ | 必須かどうか | 説明 |
|---|---|---|---|
| x | Integer | 必須 | マップ中心のX座標 |
| y | Integer | 必須 | マップ中心のY座標 |
| mx | Integer | 必須 | マーカーのX座標 |
| my | Integer | 必須 | マーカーのY座標 |
| width | Integer | 任意 | マップの幅 未入力時は基本600px |
| height | Integer | 任意 | マップの高さ 未入力時は基本600px |
| imgurl | String | 任意 | マーカーイメージURL 未入力時は基本マーカーを使用 |
| level | Integer | 任意 | マップレベル 未入力時は基本10 |
| maptype | String | 任意 | マップタイプ 未入力の時は基本一般マップ |
| label | String | 任意 | ラベルの内容 |
Android/iOS WebViewで使用できるハイブリッド型のアプリを開発する時、NHN Cloud Maps APIを利用し、JavaScript基盤のWebマップと同じAPIで使用できます。 APIの詳細は、1. Webマップを参照してください。
<!DOCTYPE html>
<html>
<head>
// モバイル端末に合わせてviewportを設定します。
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<style>
body {
margin: 0;
}
#div_map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
// マップを使用するためのjsファイルを宣言します。
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/map.js"></script>
<script>
// マップを使用するための認証を進行します。
Map.authentification("appKey");
</script>
</head>
<body>
//マップを入れるDIVを作成します。
<div id="div_map"></div>
<script type="text/javascript">
//宣言したDIVにマップを表示します。(モバイルマップタイプで'm'を宣言します。)
var map = new thinkware.maps.Map("div_map", {
center: {
twX: 169030,
twY: 517922
},
level: 12,
type: "m",
callback: success = function() {
console.log("map init success!");
}
});
</script>
</body>
</html>